<template>
  <div>
    <div class="top-bar">
      <mu-appbar title="登录">
      <mu-icon-button icon="arrow_back" slot="left" @click="goBack" />
      </mu-appbar>
    </div>  
    <div class="login-form">
      <mu-text-field hintText="请输入您的手机号码" type="number" icon="phone" value="phone" @change="handlePhoneChange" fullWidth /><br/>
      <mu-text-field hintText="设置登录密码，不少于6位" type="password" icon="label" value="passwd" @change="handlePassChange" fullWidth /><br/>
      <br>
      <br>
      <mu-raised-button label="登录" class="login-btn" @click="handleLogin" secondary fullWidth/>
    </div>
    <mu-popup position="top" :overlay="false" popupClass="popup-top" :open="topPopup">
      手机号或密码不正确！
    </mu-popup>
  </div>
</template>

<style scoped>
  .popup-top {
    width: 100%;
    opacity: .8;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 375px;
  }

  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    text-align: left;
  }

  .login-form {
    margin-top: 100px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
  }

  .login-btn {
    height: 43px;
    border-radius: 20px;
  }
</style>

<script>
  import Axios from 'axios'
  import qs from 'qs'
  export default {
    data () {
      return {
        phone: '',
        passwd: '',
        topPopup: false
      }
    },
    watch: {
      topPopup (val) {
        if (val) {
          setTimeout(() => {
            this.topPopup = false
          }, 1500)
        }
      }
    },
    methods: {
      open () {
        this.topPopup = true
      },
      created () {
        this.$router.push({path: '/index/song-list'})
      },
      goBack () {
        history.go(-1)
      },
      handlePhoneChange (e) {
        this.phone = e.target.value
      },
      handlePassChange (e) {
        this.passwd = e.target.value
      },
      handleLogin () {
        var data = qs.stringify({
          phone: this.phone,
          password: this.passwd
        })
        var instance = Axios.create({
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'text/html, application/json'
          }
        })
        instance.post('http://hongtaofans.cn/music/user/login', data)
        .then((res) => {
          if (res.data.status === 1) {
            this.$router.push({path: '/index/user'})
            localStorage.setItem('uId', res.data.uId)
          } else {
            console.log('获取数据错误！')
            this.topPopup = true
          }
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
